RuoYi

2023-09-17 08:23| 来源: 网络整理| 查看: 265

项目需求： RuoYi-Vue 前端分离版集成富文本编辑（tinyMce）

参考资料： https://www.tiny.cloud/docs/general-configuration-guide/use-tinymce-inline（官网文档） http://tinymce.ax-z.cn/advanced/some-example.php（中文文档，可提供参考）

安装步骤：

步骤1：npm install tinymce -S

步骤2： vue2 npm install @tinymce/tinymce-vue@^3 -S

vue3（之后的步骤未验证，哪位朋友验证可帮忙留言） npm install @tinymce/tinymce-vue@^4 -S

步骤3：

方式1：

下载地址：百度网盘请输入提取码

提取码：vr2f

方式2：

Download WYSIWYG HTML Editor | Tiny API Key | TinyMCE （官网）

将tinymce文件拷贝ruoyi-ui>public文件夹

步骤4：在ruoyi-ui>public>index.html输入：

步骤5：在ruoyi-yi>src>components文件夹创建Tinymce及index.vue（生成组件）

index.vue代码

export default { props: ['str'], data () { return {} }, computed: {}, watch: { str: function (val) { window.tinymce.activeEditor.setContent(val) } }, components: {}, mixins: [], beforeCreate () {}, created () {}, beforeMount () {}, mounted () { let that = this let el = this.$refs['textarea'] el.addEventListener('input', e => { console.log(e.target.value,e,) }) window.tinymce.init({ target: el, language_url: '/tinymce/langs/zh_CN.js', language: 'zh_CN', content_style: 'p {margin: 0px; padding: 0px} body {margin:8px;font-family:arial,sans-serif;font-size:14px;}', // 初始换样式 menubar: false, // 显示菜单栏 height: '500px', // 高度 fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px', font_formats: 'Arial=arial,helvetica,sans-serif;微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;Andale Mono=andale mono,times;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;', auto_focus: false, resize: false, placeholder: '请输入内容', convert_urls: false, // images_upload_url: '/dev-api/common/upload', // images_upload_base_path: '/dev-api', plugins: 'table,pagebreak,charmap,emoticons,hr,lists,fullscreen,code,preview,image,imagetools,recommendedsearch,visio,form', // toolbar: // 'undo redo formatselect fontselect fontsizeselect lineheight bold italic numlist underline strikethrough forecolor backcolor table pagebreak alignleft aligncenter alignright alignjustify outdent indent blockquote removeformat image imagetools charmap emoticons hr fullscreen code preview recommendedsearch visio', toolbar: 'alignleft aligncenter alignright alignjustify bold image table imagetools preview recommendedsearch visio form', init_instance_callback: function (editor) { editor.on('input', e => { // console.log(editor.getContent()) }) editor.on('blur', e => { console.log(editor.getContent()) that.$emit('setStr', editor.getContent()) }) } }) }, activated () {}, deactivated () {}, beforeDestroy () { console.log('componentsTinymce_index组件即将销毁') }, methods: {} } .componentsTinymce_index { height: 100%; }

步骤6：在ruoyi-yi>src>views>文件夹index.vue调用Tinymce（步骤5创建的组件）

界面展示效果：

【本文地址】

公司简介

联系我们